<template>
  <div class="content">
    <div class="display p-l-30">
      <!-- <img @click="btn" src="../assets/img/logJt.png" alt="" /> -->
      <div class="header">{{ hederTit }}</div>
      <div class="p-r-20" v-if="numValue == 2">
        <el-button type="text" class="button-s button-s-g" @click="sure">
          确定
        </el-button>
      </div>
    </div>
    <!-- 视频电话 -->
    <template v-if="numValue == 2">
      <div class="c-t2">
        <div class="imgYsr m-a m-b-20">
          <!-- 后面访img -->
          头像
        </div>
        <div class="c-t2-f">
          <div class="display m-b-20 j-c" :key="item" v-for="item in list">
            <div class="display">
              <div class="imgYsr m-r-40">
                <!-- 后面访img -->
                头像
              </div>
              <div class="rightText">{{ item.name }}</div>
            </div>
            <div>
              <div
                v-if="!item.ridao"
                class="yuan"
                @click="item.ridao = true"
              ></div>
              <!-- 初始化的额可以在数据里面选择一个状态值-->
              <div class="a-yuan" v-if="item.ridao" @click="item.ridao = false">
                <div class="a-yuan-s"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 群消息 -->
    <template v-if="numValue == 1">
      <!-- 列表 -->
      <div class="c-t p-l-30 p-r-20" ref="scrollContainer">
        <div
          class="display m-b-20"
          v-for="(item, index) in messageLists"
          :key="item.msgId"
        >
          <div
            class="imgYsr"
            v-if="JSON.parse(item.content).type != 'revoke' || item.avatar"
          >
            <!-- 后面访img -->
            <img
              v-if="item.avatar && JSON.parse(item.content).type != 'revoke'"
              style="width: 100%; height: 100%"
              :src="item.avatar"
              alt=""
            />
            <div v-else>暂无</div>
          </div>

          <div class="rightText">
            <!-- item.fromUser -->
            <div v-if="JSON.parse(item.content).type != 'revoke'">
              {{ item.name ? item.name : "未获取微信名" }} ({{
                formatDate(parseInt(item.msgTime))
              }})

              <!-- <span v-if="JSON.parse(item.content).type == 'revoke'"
                >(已撤回)</span
              > -->
              <!-- {{ JSON.parse(item.content) }} -->
            </div>
            <div
              style="width: 60px; height: 60px; margin-top: 10px"
              v-if="
                JSON.parse(item.content).type == 'image' ||
                JSON.parse(item.content).type == 'emotion'
              "
            >
              <img
                @click="fadang(JSON.parse(item.content).path)"
                style="width: 80px; height: 80px; cursor: pointer"
                class="thumbnail"
                :src="
                  'http://api.care-bay.com/static/' +
                  JSON.parse(item.content)?.path
                "
                alt="Thumbnail"
              />

              <div class="fadang" v-if="fadangs">
                <img
                  class="zoomed-image"
                  :src="'http://api.care-bay.com/static/' + fangdasrc"
                  alt="Zoomed Image"
                />
                <div class="colose" @click="fadangs = false">X</div>
              </div>

              <!-- <img style="width: 100%; height: 100%" alt="" /> -->
            </div>

            <div
              class="textXinxi"
              v-if="JSON.parse(item.content).type == 'text'"
            >
              {{ JSON.parse(item.content).content }}
            </div>

            <div
              class="textXinxi"
              v-if="JSON.parse(item.content).type == 'sphfeed'"
            >
              {{ JSON.parse(item.content).feed_desc }}
            </div>

            <!--    v-if="JSON.parse(item?.content)?.type == 'revoke'" -->
            <div
              class="textXinxi"
              style="cursor: pointer"
              v-if="JSON.parse(item.content).type == 'link'"
            >
              <a target="_blank" :href="JSON.parse(item.content).link_url"
                >{{ JSON.parse(item.content).title }}(图文链接可点击)</a
              >
              <!-- {{
                JSON.parse(item.content).pre_msgid == item.msgId
                  ? "已经撤回的信息"
                  : JSON.parse(JSON.parse(item?.content).content)?.content
              }} -->
              <!-- {{ JSON.parse(JSON.parse(item?.content).content)?.content }} -->

              <!-- {{ jsonData(JSON?.parse(item?.content)) }} -->
            </div>

            <!-- <div
              class="textXinxi"
              v-if="JSON.parse(item.content).type == 'revoke'"
            >
              该消息已撤回
            </div> -->
          </div>
        </div>
      </div>
      <div class="height-124">
        <div class="p-l-30">
          <img class="icons" src="../assets/img/logXL.png" alt="" srcset="" />
          <img class="icons" src="../assets/img/logXX2.png" alt="" srcset="" />
        </div>

        <div class="h-c-70">
          <!-- 这里放输入框 -->
          <el-input
            v-model="input"
            class="input-footr"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="f-e display p-r-20">
          <el-button type="text" class="button-s"> 发送 </el-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Viewer from "viewerjs";
export default {
  components: {
    Viewer,
  },
  props: {
    messageLists: Array,
    numValue: Number,
    hederTit: String,
  },
  data() {
    return {
      fangdasrc: "",
      fadangs: false,
      input: "",
      qunlist: [],
      // messageLists: [],
      list: [
        {
          name: "指挥中心",
          ridao: false,
        },
        {
          name: "客户",
          ridao: false,
        },
        {
          name: "护理",
          ridao: false,
        },
        {
          name: "负责人",
          ridao: false,
        },
      ],
    };
  },
  mounted() {
    this.scrollToBottom();
    // this.qunlist = this.$store.state.qunList;
    // this.messageLists = this.$store.state.messageLists;
    // this.initImageViewer();
    // this.jsonData();
  },
  methods: {
    // jsonData(e) {
    //   console.log(JSON.parse(e?.content).content == undefined);

    //   // if (JSON.parse(e?.content)?.content == "undefined") {
    //   //   return "暂无数据";
    //   // } else {
    //   //   return JSON.parse(e?.content)?.content;
    //   // }
    // },
    scrollToBottom() {
      // 获取滚动容器的引用
      const container = this.$refs.scrollContainer;
      // 将滚动位置设置为最底部
      container.scrollTop = container.scrollHeight;
    },
    formatDate(date) {
      if (date) {
        let data = new Date(date);
        const year = data.getFullYear();
        const month = (data.getMonth() + 1).toString().padStart(2, "0");
        const day = data.getDate().toString().padStart(2, "0");
        const hours = data.getHours().toString().padStart(2, "0");
        const minutes = data.getMinutes().toString().padStart(2, "0");
        const seconds = data.getSeconds().toString().padStart(2, "0");
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      }
    },

    fadang(src) {
      this.fadangs = true;
      this.fangdasrc = src;
      console.log("imag", src);
    },
    initImageViewer() {
      this.viewer = new Viewer(this.$el.querySelectorAll(".image-preview"), {
        url: "data-src",
        toolbar: {
          zoomIn: 1,
          zoomOut: 1,
          oneToOne: 1,
          reset: 1,
          prev: 0,
          play: {
            show: 0,
            size: "large",
          },
          next: 0,
          rotateLeft: 1,
          rotateRight: 1,
          flipHorizontal: 1,
          flipVertical: 1,
        },
      });
    },

    btn() {
      this.$emit("switchCancel", false);
    },
    // 确定
    sure() {
      let arr = this.list.filter((item) => {
        return item.ridao;
      });
      if (arr.length == 0) {
        this.$message.warning("请选择用户");
        return false;
      }
      this.btn(); //关闭当前模块
      // 打开视频通化某块  并传输数据
      this.$emit("switchData", arr);
    },
  },
  created() {},
};
</script>
<style scoped>
div {
  font-size: 13px !important;
}
.header {
  font-size: 20px !important;
  color: #fff;
  font-weight: 300;
  width: 100%;
  text-align: center;
  line-height: 40px;
}
.content {
  border: 1px solid #f2f2f2;
  background: #031032;
}
.display {
  display: flex;
}
.j-c {
  justify-content: space-between;
}
.p-l-30 {
  padding-left: 30px;
}
.icons {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}
.p-r-20 {
  padding-right: 20px;
}
.m-b-20 {
  margin-bottom: 30px;
}
.m-r-30 {
  margin-right: 30px;
}
.m-r-40 {
  /* margin-right: 40px; */
}
.button-s {
  /* width: 124px;
  height: 28px; */
  color: #fff;
  font-size: 20px;
  background: #031032;
  border: 1px solid #797979;
  padding: 4px 15px;
}
.button-s-g {
  background: #04f21c !important;
  border: 0;
}
.height-124 {
  padding-top: 10px;
  height: 33%;
  box-sizing: border-box;
}
.f-e {
  justify-content: flex-end;
  margin-top: 37px;
}
.h-c-70 {
  height: calc(70% - 70px);
}
.c-t {
  height: calc(100% - 204px);
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: auto;
  box-sizing: border-box;
  min-height: 305px;
}
/* 头像 */
.imgYsr {
  height: 40px;
  width: 40px;
  border: 1px solid #797979;
  /* border-radius: 9px; */
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

/*列表汉字 */
.rightText {
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  width: 100%;
  /* min-height: 240px; */
}
/* 视频童话 */
.c-t2 {
  height: calc(100% - 60px);
  border-top: 1px solid #424a5f;
  padding: 16px 40px;
  box-sizing: border-box;
}
.m-a {
  margin: auto;
}
.c-t2-f {
  margin-top: 20px;
  height: calc(100% - 68px);
  overflow: auto;
}
/* 白园 */
.yuan {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  background: #fff;
  cursor: pointer;
}
/* 选中的园 */
.a-yuan {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  border: 1px solid #009999;
  cursor: pointer;
}
.a-yuan-s {
  width: 17px;
  height: 17px;
  border-radius: 100%;
  background: #009999;
  margin: auto;
  position: relative;
  top: 5px;
  cursor: pointer;
}
</style>
<style>
.el-input {
  height: 100%;
}
.input-footr .el-input__inner {
  height: 100%;
  border: 0;
  background: #031032;
  color: #fff;
}
.input-footr {
  caret-color: #fff;
}

/* 放大后的图片样式 */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}
.fadang {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(51, 64, 97, 0.5);
  width: 100%;
  height: 100%;
  z-index: 11111;
}
.zoomed-image {
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(51, 64, 97, 0.5);
}
.colose {
  float: right;
  margin: 20px;
  color: black;
  background-color: #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
.textXinxi {
  position: relative;
  width: 90%;
  min-height: 40px;
  margin-top: 10px;
  background: #fff;
  color: #000000;
  text-indent: 8px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px;
}
.textXinxi::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -17px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  transform: rotate(-90deg);
}
</style>
